<template>
  <d2-container>
    <template slot="header">
      <span style="margin-right: 10px;">用户管理</span>
      <el-button @click="syncUserHandle" type="primary" size="mini">同步研发人员</el-button>
    </template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="nickName"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="jobNumber"
        label="工号">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status === 1 ? 'success' : 'danger'"
            disable-transitions>{{ scope.row.status === 1 ? '有效' : '无效' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <template slot="footer">
      <el-pagination
        layout="prev, pager, next"
        @current-change="pageChangeHandle"
        :page-size="this.page.pageSize"
        :current-page="this.page.pageNum"
        :total="this.page.total">
      </el-pagination>
    </template>
  </d2-container>
</template>

<script>
import api from '@/api'

export default {
  name: 'user',
  data () {
    return {
      tableData: [],
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
    }
  },
  methods: {
    searchUser () {
      api.UserList({ ...this.page }).then(res => {
        this.page.total = res.count
        this.tableData = res.data
      })
    },
    syncUserHandle () {
      api.SyncUser().then(res => {
        this.$message({
          message: '同步成功',
          type: 'success'
        })
        this.searchUser()
      })
    },
    pageChangeHandle (currentPage) {
      this.page.pageNum = currentPage
      this.$nextTick(() => {
        this.searchUser()
      })
    }
  },
  mounted () {
    this.searchUser()
  }
}
</script>
